<template>
	<view>
		<!-- 商品轮播图 -->
		<GoodsDetailPicture :swiperBanner="props.swiperBanner" :video="props?.goodsDetailData?.video">
		</GoodsDetailPicture>

		<!-- 提示窗口 预留给活动商品 -->
		<slot name="tip"></slot>

		<!-- 商品信息 价格名字之类的 -->
		<GoodsDetailInfo :goodsDetailData="props.goodsDetailData" :shareType="props.shareType" 
			:isActivityGoods="props.isActivityGoods" @handleToggleGoodsCollection="handleToggleGoodsCollection">
			<template #countDown>
				<slot name="countDown"></slot>
			</template>
		</GoodsDetailInfo>

		<!-- 商品服务 优惠 发货 等 -->
		<GoodsDetailService :isCustomService="props.isCustomService" :goodsPromotionList="props.goodsPromotionList"
			:delivery="state.delivery" :service="state.service" :spesDesc="props.spesDesc"
			@hanldeShowGoodSku="hanldeShowGoodSku">
			<template #service>
				<slot name="service"></slot>
			</template>
			<template #customService>
				<slot name="customService"></slot>
			</template>
		</GoodsDetailService>

		<!-- 活动商品的其它服务 例如拼团，秒杀，团购的人员 -->
		<slot name="activityGoodsOtheService"></slot>

		<!-- 商品代理 -->
		<GoodsDetailAgent v-if="props.agentProductsList.length > 0" :userAgentGrade="props.userAgentGrade"
			:agentProductsList="props.agentProductsList"></GoodsDetailAgent>

		<!-- 商品评价 -->
		<GoodsDetailEvaluate :id="props.goodsId" :commentsCount="state.commentsCount"
			:commentsList="state.commentsList">
		</GoodsDetailEvaluate>

		<!-- 商品参数 -->
		<GoodsDetailParams v-if="state.goodsParamsList.length > 0" :goodsParamsList="state.goodsParamsList">
		</GoodsDetailParams>

		<!-- 商品详情 -->
		<GoodsDetailContent :goodsDetailContent="props.goodsDetailContent"></GoodsDetailContent>

		<!-- 常见问题 -->
		<GoodsDetailCommonProblem :commonQuestion="state.commonQuestion"></GoodsDetailCommonProblem>

	</view>
</template>

<script setup lang="ts">
	import GoodsDetailPicture from './components/goods-detail-picture/goods-detail-picture.vue';
	import GoodsDetailContent from './components/goods-detail-content/goods-detail-content.vue';
	import GoodsDetailCommonProblem from './components/goods-detail-common-problem/goods-detail-common-problem.vue';
	import GoodsDetailEvaluate from './components/goods-detail-evaluate/goods-detail-evaluate.vue';
	import GoodsDetailParams from './components/goods-detail-params/goods-detail-params.vue';
	import GoodsDetailAgent from './components/goods-detail-agent/goods-detail-agent.vue';
	import GoodsDetailInfo from './components/goods-detail-info/goods-detail-info.vue';
	import GoodsDetailService from './components/goods-detail-service/goods-detail-service.vue';
	import { UserToken } from '@/core/consts'
	import { ShareEnum } from '@/core/enum'
	import { onMounted, reactive, watch } from 'vue';
	import { queryServiceDescriptionl, queryGoodsComment, queryGoodsParams, queryAddGoodsBrowsing } from '@/core/api';
	import type { Response, CommonQuestionServiceType, GoodsPictureType, GoodsPictureListType, GoodsParamsType, GoodsAgentListType, GoodsPromotionType } from "@/core/models";

	const props = withDefaults(defineProps<{
		isActivityGoods : boolean,
		goodsId : number,
		goodsDetailData : any,
		swiperBanner : Array<any>,
		goodsDetailContent : string,
		userAgentGrade : any,
		agentProductsList : Array<GoodsAgentListType>,
		goodsPromotionList : Array<GoodsPromotionType>,
		spesDesc : string,
		isCustomService : boolean,
		shareType : ShareEnum,
	}>(), {
		isActivityGoods: false,        /** 是否是活动商品 */
		goodsId: 0,                    /** 商品id */
		goodsDetailData: {},           /** 商品数据集合 */
		swiperBanner: () => [],        /** 商品轮播图 */
		goodsDetailContent: '',        /** 商品详情 */
		userAgentGrade: {},            /** 用户代理信息 */
		agentProductsList: () => [],   /** 用户代理此商品的代理价格佣金等数据 */
		goodsPromotionList: () => [],  /** 商品参数，例如衣服大小等  */
		spesDesc: '',                  /** 商品规格 */
		isCustomService: false,        /** 是否自定义商品服务模块 */
		shareType: ShareEnum.index,    /** 分享类型 - 默认分享首页 */
	});

	const emits = defineEmits(['hanldeShowGoodSku', 'handleToggleGoodsCollection']);

	const state = reactive<{
		commonQuestion : Array<CommonQuestionServiceType>;
		delivery : Array<CommonQuestionServiceType>;
		service : Array<CommonQuestionServiceType>;
		commentsCount : number;
		commentsList : Array<GoodsPictureListType>;
		goodsParamsList : Array<GoodsParamsType>;
	}>({
		commonQuestion: [],
		delivery: [],
		service: [],
		commentsCount: 0,
		commentsList: [],
		goodsParamsList: [],
	})

	watch(() => props.goodsId, (newVal : number) => {
		if (newVal) {
			/** 获取商品评价 */
			getGoodsComment();
			/** 获取商品参数 */
			getGoodsParams();
			/** 如果用户登录，添加商品足迹 */
			if (uni.getStorageSync(UserToken)) {
				handleGoodsBrowsing();
			}
		}
	})

	onMounted(() => {
		/** 获取商品的常见问题，服务等信息 */
		getServiceDescriptionl();
	})

	/** 获取商品的常见问题，服务等信息 */
	const getServiceDescriptionl = async () => {
		const serviceDescriptionl : Response<any> = await queryServiceDescriptionl();
		state.commonQuestion = serviceDescriptionl.data.commonQuestion
		state.delivery = serviceDescriptionl.data.delivery
		state.service = serviceDescriptionl.data.service
	}

	/** 获取商品评价 */
	const getGoodsComment = async () => {
		const goodsComment : Response<GoodsPictureType> = await queryGoodsComment({
			id: props.goodsId,
			limit: 5,
			page: 1
		});
		state.commentsCount = goodsComment?.data?.commentsCount;
		state.commentsList = goodsComment?.data?.list;
	}

	/** 获取商品参数 */
	const getGoodsParams = async () => {
		const goodsParams : Response<Array<GoodsParamsType>> = await queryGoodsParams({
			id: props.goodsId,
		})
		state.goodsParamsList = goodsParams?.data || [];
	}

	/** 商品浏览足迹 */
	const handleGoodsBrowsing = async () => {
		await queryAddGoodsBrowsing({ id: props.goodsId });
	}

	/** sku显示 */
	const hanldeShowGoodSku = () => {
		emits('hanldeShowGoodSku')
	}

	/** 商品收藏 */
	const handleToggleGoodsCollection = () => {
		emits('handleToggleGoodsCollection')
	} 
</script>

<style lang="scss" scoped></style>